import React from 'react';
import { Card, Button, Space, Typography, Divider } from 'antd';
import {
  PlusOutlined,
  DeleteOutlined,
  ReloadOutlined,
  SettingOutlined,
  UserOutlined,
  DashboardOutlined,
  EnvironmentOutlined,
  DatabaseOutlined,
  BulbOutlined
} from '@ant-design/icons';
import useTabStore from '../stores/tabStore';
import { useNavigate } from 'react-router-dom';

const { Title, Text, Paragraph } = Typography;

const TabDemo = () => {
  const navigate = useNavigate();
  const { addTab, tabs, activeTab } = useTabStore();

  const handleOpenTab = (path) => {
    addTab(path);
    navigate(path);
  };

  // 图标映射函数
  const getIcon = (iconName) => {
    const iconMap = {
      'DashboardOutlined': <DashboardOutlined />,
      'EnvironmentOutlined': <EnvironmentOutlined />,
      'SettingOutlined': <SettingOutlined />,
      'DatabaseOutlined': <DatabaseOutlined />,
      'BulbOutlined': <BulbOutlined />,
      'UserOutlined': <UserOutlined />,
    };
    return iconMap[iconName] || <DashboardOutlined />;
  };

  return (
    <div style={{ padding: 24 }}>
      <Card>
        <Title level={2}>🏷️ Tab标签系统演示</Title>
        <Paragraph>
          这是一个完整的Tab标签页系统，支持多标签页管理、拖拽排序、右键菜单等功能。
        </Paragraph>

        <Divider />

        <Title level={3}>✨ 主要功能</Title>
        <ul>
          <li>🔄 <strong>智能标签页管理</strong> - 自动添加、切换和关闭标签页</li>
          <li>💾 <strong>状态持久化</strong> - 刷新页面保持标签页状态</li>
          <li>🖱️ <strong>拖拽排序</strong> - 可以拖拽标签页重新排序</li>
          <li>📋 <strong>右键菜单</strong> - 丰富的上下文菜单操作</li>
          <li>📱 <strong>响应式设计</strong> - 适配不同屏幕尺寸</li>
          <li>🎨 <strong>主题适配</strong> - 支持明暗主题切换</li>
          <li>⚡ <strong>性能优化</strong> - 最大标签页数量限制，智能内存管理</li>
        </ul>

        <Divider />

        <Title level={3}>🚀 快速测试</Title>
        <Space size={16} wrap>
          <Button
            type="primary"
            icon={<PlusOutlined />}
            onClick={() => handleOpenTab('/samples')}
          >
            打开样本管理
          </Button>
          <Button
            icon={<PlusOutlined />}
            onClick={() => handleOpenTab('/devices')}
          >
            打开设备管理
          </Button>
          <Button
            icon={<SettingOutlined />}
            onClick={() => handleOpenTab('/data')}
          >
            打开数据查询
          </Button>
        </Space>

        <Divider />

        <Title level={3}>📊 当前状态</Title>
        <Card size="small" style={{ backgroundColor: '#f9f9f9' }}>
          <Text strong>当前打开的标签页数量：</Text> {tabs.length}
          <br />
          <Text strong>当前激活标签页：</Text> {tabs.find(tab => tab.key === activeTab)?.title || '未知'}
          <br />
          <Text strong>标签页列表：</Text>
          <div style={{ marginTop: 8 }}>
            {tabs.map((tab, index) => (
              <span key={tab.key} style={{ marginRight: 8, display: 'inline-flex', alignItems: 'center' }}>
                <span style={{ marginRight: 4, fontSize: 14 }}>
                  {getIcon(tab.icon)}
                </span>
                <Text
                  code={tab.key === activeTab}
                  style={{
                    color: tab.key === activeTab ? '#1890ff' : undefined,
                    fontWeight: tab.key === activeTab ? 'bold' : 'normal'
                  }}
                >
                  {tab.title}
                </Text>
                {index < tabs.length - 1 && <span style={{ margin: '0 8px' }}>|</span>}
              </span>
            ))}
          </div>
        </Card>

        <Divider />

        <Title level={3}>💡 使用提示</Title>
        <Card size="small">
          <ul style={{ margin: 0 }}>
            <li><Text code>点击侧边栏菜单</Text> 会自动添加到标签页系统</li>
            <li><Text code>右键点击标签页</Text> 查看更多操作选项</li>
            <li><Text code>拖拽标签页</Text> 可以重新排序</li>
            <li><Text code>点击关闭按钮</Text> 关闭可关闭的标签页</li>
            <li><Text code>仪表盘标签页</Text> 不可关闭，始终保持打开</li>
            <li><Text code>刷新页面</Text> 标签页状态会自动恢复</li>
          </ul>
        </Card>

        <Divider />

        <Text type="secondary">
          🎉 Tab标签系统已经集成到整个应用中，现在您可以享受现代化的多标签页体验！
        </Text>
      </Card>
    </div>
  );
};

export default TabDemo;
